<template>
  <div>
    <el-tabs
      v-model="activeName"
      :tab-position="tabPosition"
      type="border-card"
      class="box"
    >
      <el-tab-pane label="移通要闻" name="one">
        <ul>
          <li v-for="(item, index) in data" :key="index">
            <router-link :to="`/detail?id=${item.cid}`">
              {{ item.title }}
            </router-link>
            <hr />
          </li>
        </ul>
      </el-tab-pane>
      <el-tab-pane label="移通快讯" name="two">
        <ul>
          <li v-for="(item, index) in data" :key="index">
            <router-link :to="`/detail?id=${item.cid}`">
              {{ item.title }}
            </router-link>
            <hr />
          </li>
        </ul>
      </el-tab-pane>
      <el-tab-pane label="移通故事" name="three">
        <ul>
          <li v-for="(item, index) in data" :key="index">
            <router-link :to="`/detail?id=${item.cid}`">
              {{ item.title }}
            </router-link>
            <hr />
          </li>
        </ul>
      </el-tab-pane>
      <el-tab-pane label="通知通告" name="four">
        <ul>
          <li v-for="(item, index) in data" :key="index">
            <router-link :to="`/detail?id=${item.cid}`">
              {{ item.title }}
            </router-link>
            <hr />
          </li>
        </ul>
      </el-tab-pane>
      <el-tab-pane label="信息公开" name="five">
        <ul>
          <li v-for="(item, index) in data" :key="index">
            <router-link :to="`/detail?id=${item.cid}`">
              {{ item.title }}
            </router-link>
            <hr />
          </li>
        </ul>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabPosition: "left", //标签栏靠左对齐
      data: [], //用于存储文章标题
      activeName: "one", //默认选中项为移通要闻
    };
  },
  methods: {
    // 获取文章分类数据
    // num 新参 接收分类id的值
    getType(num) {
      this.axios.get(`/user/info?id=${num}`).then((res) => {
        // console.log(res);
        this.data = res.data.data;
      });
    },
  },
  // 页面挂载时触发
  mounted() {
    // 获取文章分类数据
    this.getType(1);
  },
  watch: {
    // 监听点击项的变更,获取不同分类的标题
    activeName(newValue, oldValue) {
      // 查看选中项的name
      // console.log(newValue);
      if (newValue == "one") {
        this.getType(1);
      } else if (newValue == "two") {
        this.getType(2);
      } else if (newValue == "three") {
        this.getType(3);
      } else if (newValue == "four") {
        this.getType(4);
      } else if (newValue == "five") {
        this.getType(5);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  height: 70vh;
  width: 80vw;
  margin: auto;
  margin-top: 100px;
  text-align: left;
  ul {
    list-style: none;
  }
  a{
    text-decoration: none;
    color: black;
  }
}
</style>
